<template>
    <div class="home-container">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
            <div class="welcome-content">
                <h1>欢迎使用农作物溯源管理系统</h1>
                <p class="subtitle">Welcome to the Agricultural Product Traceability Management System</p>
                <div class="time-weather">
                    <span class="time">{{ currentTime }}</span>
                    <span class="weather">{{ greeting }}</span>
                </div>
            </div>
        </div>

        <!-- 统计卡片区域 -->
        <div class="stats-container">
            <el-row type="flex" justify="space-between">
                <el-col :span="4">
                    <div class="stats-card" style="background: linear-gradient(135deg, #1bbc9b 0%, #1abc9c 100%)">
                        <div class="icon-wrapper">
                            <i class="el-icon-goods"></i>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ statistics.productCount }}</div>
                            <div class="stats-title">产品总数</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="stats-card" style="background: linear-gradient(135deg, #3498db 0%, #2980b9 100%)">
                        <div class="icon-wrapper">
                            <i class="el-icon-menu"></i>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ statistics.categoryCount }}</div>
                            <div class="stats-title">产品分类总数</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="stats-card" style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%)">
                        <div class="icon-wrapper">
                            <i class="el-icon-notebook-2"></i>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ statistics.recordCount }}</div>
                            <div class="stats-title">生产记录总数</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="stats-card" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)">
                        <div class="icon-wrapper">
                            <i class="el-icon-s-operation"></i>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ statistics.batchCount }}</div>
                            <div class="stats-title">检测批次总数</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="stats-card" style="background: linear-gradient(135deg, #f39c12 0%, #d35400 100%)">
                        <div class="icon-wrapper">
                            <i class="el-icon-s-check"></i>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ statistics.inspectionCount }}</div>
                            <div class="stats-title">检测记录总数</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 快捷功能区域 -->
        <div class="quick-access">
            <h2 class="section-title">快捷功能</h2>
            <el-row type="flex" justify="space-between">
                <el-col :span="7" v-for="(item, index) in quickAccess" :key="index">
                    <div class="quick-access-card" @click="handleQuickAccess(item.route)">
                        <i :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 系统信息 -->
        <div class="system-info">
            <h2 class="section-title">系统信息</h2>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="info-card">
                        <div class="info-item">
                            <span class="label">系统名称：</span>
                            <span class="value">农作物溯源管理系统 V1.0</span>
                        </div>
                        <div class="info-item">
                            <span class="label">服务器环境：</span>
                            <span class="value">Spring Boot 2.7.0</span>
                        </div>
                        <div class="info-item">
                            <span class="label">数据库版本：</span>
                            <span class="value">MySQL 8.0</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="info-card">
                        <div class="info-item">
                            <span class="label">前端框架：</span>
                            <span class="value">Vue.js + Element UI</span>
                        </div>
                        <div class="info-item">
                            <span class="label">操作系统：</span>
                            <span class="value">Windows Server 2022</span>
                        </div>
                        <div class="info-item">
                            <span class="label">系统时间：</span>
                            <span class="value">{{ currentTime }}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomePage',
    data() {
        return {
            currentTime: '',
            greeting: '',
            statistics: {
                productCount: 0,
                categoryCount: 0,
                recordCount: 0,
                batchCount: 0,
                inspectionCount: 0
            },
            // 供应商的快捷功能
            supplierQuickAccess: [
                { title: '产品管理', icon: 'el-icon-goods', route: '/Product' },
                { title: '产品分类', icon: 'el-icon-menu', route: '/ProductCategory' },
                { title: '生产记录', icon: 'el-icon-notebook-2', route: '/ProductRecord' },
                { title: '供应商信息', icon: 'el-icon-office-building', route: '/Supplier' }
            ],
            // 加工商的快捷功能
            processorQuickAccess: [
                { title: '加工批次', icon: 'el-icon-s-operation', route: '/ProcessingBatch' },
                { title: '质量检测', icon: 'el-icon-s-check', route: '/QualityInspection' },
                { title: '加工企业', icon: 'el-icon-office-building', route: '/Processor' }
            ],
            // 管理员的快捷功能
            adminQuickAccess: [
                { title: '用户管理', icon: 'el-icon-user', route: '/UserList' },
                { title: '产品管理', icon: 'el-icon-goods', route: '/Product' },
                { title: '产品分类', icon: 'el-icon-menu', route: '/ProductCategory' },
                { title: '生产记录', icon: 'el-icon-notebook-2', route: '/ProductRecord' },
                { title: '加工批次', icon: 'el-icon-s-operation', route: '/ProcessingBatch' },
                { title: '质量检测', icon: 'el-icon-s-check', route: '/QualityInspection' }
            ]
        }
    },
    computed: {
        // 根据用户角色返回对应的快捷功能列表
        quickAccess() {
            if(this.$store.state.user.role === '生产方') {
                return this.supplierQuickAccess
            } else if(this.$store.state.user.role === '加工方') {
                return this.processorQuickAccess
            } else if(this.$store.state.user.role === '管理员') {
                return this.adminQuickAccess
            }
            return [] // 默认返回空数组
        }
    },
    created() {
        this.updateTime()
        this.updateGreeting()
        this.getStatistics()
        // 每秒更新时间
        setInterval(this.updateTime, 1000)
    },
    methods: {
        async getStatistics() {
            try {
                const response = await this.$http.statistics.getAll()
                if (response.data.code === 200) {
                    this.statistics = response.data.data
                }
            } catch (error) {
                console.error('获取统计数据失败:', error)
                this.$message.error('获取统计数据失败')
            }
        },
        updateTime() {
            const now = new Date()
            this.currentTime = now.toLocaleTimeString('zh-CN', {
                hour12: false,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            })
        },
        updateGreeting() {
            const hour = new Date().getHours()
            if (hour < 6) {
                this.greeting = '凌晨好'
            } else if (hour < 9) {
                this.greeting = '早上好'
            } else if (hour < 12) {
                this.greeting = '上午好'
            } else if (hour < 14) {
                this.greeting = '中午好'
            } else if (hour < 17) {
                this.greeting = '下午好'
            } else if (hour < 19) {
                this.greeting = '傍晚好'
            } else {
                this.greeting = '晚上好'
            }
        },
        handleQuickAccess(route) {
            this.$router.push(route)
        }
    }
}
</script>

<style scoped>
.home-container {
    padding: 20px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 60px);
}

.welcome-section {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.welcome-content h1 {
    font-size: 32px;
    margin: 0;
    font-weight: 500;
}

.subtitle {
    font-size: 16px;
    opacity: 0.8;
    margin: 10px 0;
}

.time-weather {
    margin-top: 20px;
    font-size: 18px;
}

.time-weather .time {
    margin-right: 20px;
}

.stats-container {
    margin: 20px 0;
    padding: 0 5px;
}

.stats-card {
    padding: 20px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 50px;
    width: 150px;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.icon-wrapper {
    font-size: 40px;
    margin-right: 15px;
    opacity: 0.9;
}

.stats-info {
    flex-grow: 1;
}

.stats-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stats-title {
    font-size: 14px;
    opacity: 0.9;
}

.section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: -10px;
    color: #2c3e50;
}

.quick-access {
    margin-bottom: 30px;
    padding: 0 5px;
}

.quick-access-card {
    background: white;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: -7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.quick-access-card i {
    font-size: 36px;
    margin-bottom: 12px;
    color: #409EFF;
}

.quick-access-card span {
    font-size: 14px;
    color: #606266;
}

.quick-access-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.info-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    margin-top: -7px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.info-item .label {
    color: #606266;
    width: 100px;
}

.info-item .value {
    color: #303133;
    flex-grow: 1;
}
</style>